﻿@page "/DateTime-Picker/Disabled-Dates"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
    <p>In the following sample, all the weekends (Saturday and Sunday) of a month are <code>disabled</code>, and these dates are <code>restricted</code> to set or select in the DateTimePicker.</p>
</SampleDescription>
<ActionDescription>
    <p>Disabled Dates sample demonstrates how to disable specific dates in the DateTimePicker by using <code>OnRenderDayCell</code> event. This event gets triggered on each day cell element creation, that allows you to customize, or disable specific dates in the Calendar. Here the weekend dates are disabled by using OnRenderDayCell.</p>
    <p>More information on the customize dates can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/datetime-picker/events/#onrenderdaycell'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="wrapper" class="datetimepicker-section">
        <div id="datetimepicker-control">
            <SfDateTimePicker TValue="DateTime?" @ref="@DateTimePickerObj" Placeholder="Select a date and time">
                <DateTimePickerEvents TValue="DateTime?" OnRenderDayCell="@DisableDate"></DateTimePickerEvents>
            </SfDateTimePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }
</style>

@code {
    private SfDateTimePicker<DateTime?> DateTimePickerObj { get; set; }
    private void DisableDate(RenderDayCellEventArgs args)
    {
        var view = DateTimePickerObj.CurrentView();
        if (view == "Month" && ((int)args.Date.DayOfWeek == 0 || (int)args.Date.DayOfWeek == 6))
        {
            args.IsDisabled = true;
        }
    }
}